<%--
  Created by IntelliJ IDEA.
  User: MY PC
  Date: 2018/11/26
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    /*CSS 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域. */
    body .demo-class .layui-layer-title {
        background: #c00;
        color: #fff;
        border: none;
        area: '500px', '300px';
    }

    body .demo-class .layui-layer-btn {
        border-top: 1px solid #E9E7E7
    }

    body .demo-class .layui-layer-btn a {
        background: #333;
    }

    body .demo-class .layui-layer-btn .layui-layer-btn1 {
        background: #999;
    }
</style>
<body>
<div style="text-align: center;width: 100%;height: 100%">
    <div style="text-align: center;margin-top: 20px;color: orange;width: 100%;height: 100%" id="firstId">
        <h2>欢迎来到layer的世界</h2>
        <hr>
        <br>
        <table align="center">
            <tr>
                <th>姓名1</th>
                <th>姓名2</th>
                <th>姓名3</th>
            </tr>
            <tr>
                <td>zyb1</td>
                <td>zyb2</td>
                <td>zyb3</td>
            </tr>
        </table>
        <div id="layer-photos-demo" class="layer-photos-demo">
            <img layer-pid="图片id，可以不写" layer-src="/images/152447657894.jpg" src="/images/1524476512805.jpg" alt="图片名">
            <img layer-pid="图片id，可以不写" layer-src="/images/1524476512805.jpg" src="/images/152447657894.jpg" alt="图片名">
        </div>
    </div>
    <script>
        layui.use("layer", function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            layer.msg("welcome to layer world!")

            // 信息确认框
            // layer.open({
            //     area: ['500px', '300px'],//设定弹出框的大小
            //     offset: 'rb',//设定弹出框的位置,右下角
            //     // offset: ['100px', '50px'],
            //     // title:"提示",
            //     title: ['警告', 'font-size:18px;color:red;'],
            //     type: "0",
            //     content: '这里content是一个普通的String111' //这里content是一个普通的String
            // });

            //页面层,获取id为firstId的元素下的页面内容
            // layer.open({
            //     title: "DOM",
            //     type: 1,
            //     area: ['350', '200'],
            //     content: $('#firstId') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            ////   content: '这里content是一个普通的String111' //这里content是一个普通的String
            // });

            //Ajax请求,并返回信息
            // $.get('http://127.0.0.1/hello', {}, function(str){
            //     layer.open({
            //         type: 1,
            //         area: ['350', '200'],
            //         content: str //返回值,如果str是object，那么需要字符拼接。
            //     });
            // });

            //如果是iframe层,展示的是url页面的内容
            // layer.open({
            //     area: ['500', '300'],
            //     type: 2,
            //     content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            // });

            // 如果是用layer.open执行tips层
            // layer.open({
            //     type: 4,
            //     area: ['500', '300'],
            //     content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
            // });

            //单个使用
            // layer.open({
            //     skin: 'demo-class',
            //     area: ['500px', '300px'],//设定弹出框的大小
            //     offset: '100px',//设定弹出框的位置
            //     // title:"提示",
            //     title: ['警告', 'font-size:18px;color:black;'],
            //     type: "0",
            //     content: '这里content是一个普通的String111' //这里content是一个普通的String
            // });

            //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
            //建议放置在最上面的位置, 至少在open方法的上面,好先执行config, 而在open中得到应用
            // layer.config({
            //     skin: 'demo-class'
            // })

            //icon - 图标。信息框和加载层的私有参数
            // layer.alert('酷毙了', {icon: 1});
            // layer.msg('不开心。。', {icon: 5});

            //eg1 btn - 按钮
            // layer.confirm('确认提交吗?', {
            //     btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
            //     , btn3: function (index, layero) {
            //         //按钮【按钮三】的回调
            //         layer.alert(index+"-"+layero)
            //     }
            // }, function (index, layero) {
            //     //按钮【按钮一】的回调
            //     layer.alert(index+"-"+layero)
            // }, function (index) {
            //     //按钮【按钮二】的回调
            //     layer.alert(index)
            // });

            //eg2 btn - 按钮
            // layer.open({
            //     btnAlign: 'l',//图标按钮的排泄规则
            //     closeBtn: 2,//关闭按钮的风格
            //     shade: [0.8, '#393D49'],//遮罩的颜色
            //     shadeClose: true,//关闭遮罩效果
            //     time: 5000,//倒计时关闭
            //     anim: 1,//弹出框出现的方式
            //     maxmin: true,
            //     fixed: true,
            //     resizing: function (layero) {
            //         console.log(layero);
            //     },
            //     content: '确认修改吗?'
            //     , btn: ['按钮一', '按钮二', '按钮三']
            //     , yes: function (index, layero) {
            //         //按钮【按钮一】的回调
            //         layer.close(index)//关闭窗口
            //     }
            //     , btn2: function (index, layero) {
            //         //按钮【按钮二】的回调
            //
            //         return false //开启该代码可禁止点击该按钮关闭
            //     }
            //     , btn3: function (index, layero) {
            //         //按钮【按钮三】的回调
            //
            //         //return false 开启该代码可禁止点击该按钮关闭
            //     }
            //     , cancel: function (index, layero) {
            //         //右上角关闭回调
            //         if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            //             layer.close(index)
            //         }
            //         return false;
            //         //return false 开启该代码可禁止点击该按钮关闭
            //     }
            // });

            //页面一打开就执行弹层
            // layer.ready(function(){
            //     layer.alert('很高兴一开场就见到你');
            // });

            // layer.alert
            // layer.alert('只想简单的提示');
            // //eg2
            // layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
            // //eg3
            // layer.alert('有了回调', function(index){
            //     //do something
            //     layer.close(index);
            // });

            //layer.confirm
            // layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
            //     //do something
            //
            //     layer.close(index);
            // });
            //eg2
            // layer.confirm('is not?', function(index){
            //     //do something
            //
            //     layer.close(index);
            // });

            //layer.msg
            // layer.msg('只想弱弱提示');
            //eg2
            // layer.msg('有表情地提示', {icon: 6});
            // //eg3
            // layer.msg('关闭后想做些什么', function () {
            //     // do something
            // });
            // //eg
            // layer.msg('同上', {
            //     icon: 1,
            //     time: 2000 //2秒关闭（如果不配置，默认是3秒）
            // }, function () {
            //     //do something
            // });

            //layer.load
            // var index = layer.load();
            // var index = layer.load(1); //换了种风格
            // var index = layer.load(2, {time: 10 * 1000}); //又换了种风格，并且设定最长等待10秒
            //关闭
            // layer.close(index);

            //layer.tips
            // layer.tips('只想提示地精准些', '#firstId');
            // $('#firstId').on('click', function(){
            //     var that = this;
            //     layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
            // });
            // layer.tips('在上面', '#firstId', {
            //     tips: 1
            // });

            //prompt层新定制的成员如下
            // layer.prompt(function(value, index, elem){
            //     alert(value); //得到value
            //     layer.close(index);
            // });
            //eg:2
            // layer.prompt({
            //     formType: 1,//输入框类型，支持0（文本）默认1（密码）2（多行文本）
            //     value: '初始值',//初始时的值，默认空字符
            //     title: '请输入值',
            //     maxlength: 140, //可输入文本的最大长度，默认500
            //     area: ['800px', '350px'] //自定义文本域宽高
            // }, function(value, index, elem){
            //     alert(value); //得到value
            //     layer.close(index);
            // });

            //layer.tab
            // layer.tab({
            //     area: ['600px', '300px'],
            //     tab: [{
            //         title: 'TAB1',
            //         content: '内容1'
            //     }, {
            //         title: 'TAB2',
            //         content: '内容2'
            //     }, {
            //         title: 'TAB3',
            //         content: '内容3'
            //     }]
            // });

            //layer.photos(options) - 相册层
            // $.getJSON('/photos.json', function(json){
            //     layer.photos({
            //         photos: json
            //         ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            //     });
            // });
            // layer.photos({
            //     photos: '#layer-photos-demo'
            //     ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            // });

        })
    </script>
</div>
</body>
</html>
